﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>加载鼠标位置控件</title>
    <link href="../../libs/ol/ol.css" rel="stylesheet" type="text/css" />
    <script src="../../libs/ol/ol.js" type="text/javascript"></script>
    <style type="text/css">
        #map{
            width:100%;
            height:100%;
            position:absolute;
        }
        /* 鼠标位置控件层样式设置 */
        #mouse-position{
            float:left;
            position:absolute;
            bottom:5px;
            width:200px;
            height:20px;         
            z-index:2000;   /*在地图容器中的层，要设置z-index的值让其显示在地图上层*/
        }
        /* 鼠标位置信息自定义样式设置 */
        .custom-mouse-position{
            color:Red;
            font-size:16px;
            font-family:"微软雅黑";
        }
    </style>
</head>
<body>
    <div id="map" >
        <div id="mouse-position" >          
        </div>
    </div>
    <script type="text/javascript">
        //实例化鼠标位置控件（MousePosition）
        var mousePositionControl = new ol.control.MousePosition({
            coordinateFormat: ol.coordinate.createStringXY(4), //坐标格式
            projection: 'EPSG:4326',//地图投影坐标系（若未设置则输出为默认投影坐标系下的坐标）
            className: 'custom-mouse-position', //坐标信息显示样式，默认是'ol-mouse-position'
            target: document.getElementById('mouse-position'), //显示鼠标位置信息的目标容器
            undefinedHTML: '&nbsp;'//未定义坐标的标记
        });

        //实例化Map对象加载地图
        var map = new ol.Map({
            target: 'map', //地图容器div的ID
            //地图容器中加载的图层
            layers: [
            //加载瓦片图层数据
                new ol.layer.Tile({
                    source: new ol.source.OSM() //图层对应数据源，此为加载OpenStreetMap在线瓦片服务数据
                })
            ],
            //地图视图设置
            view: new ol.View({
                center: [0, 0], //地图初始中心点
                zoom: 2 //地图初始显示级别
            }),
            //加载控件到地图容器中
            controls: ol.control.defaults({//地图中默认控件
//                attributionOptions: /** @type {ol.control.Attribution} */({
//                    collapsible: true //地图数据源信息控件是否可展开,默认为true
//                })
            }).extend([mousePositionControl])//加载鼠标位置控件
        });
    </script>
</body>
</html>
